<template>
	<view class="container">
		<view class="title fw fz18">权证处理流程</view>
		<view class="list">
			<view class="listBar" v-for="item,index in list" :key="index">
				<view class="disp cic">
					<view :class="process.flowN>index?'tac bg colorf mgrt':'tac colorf mgrt'">{{index + 1}}</view>
					<view class=" mgrt">{{item}}</view>
					<image class="right" :src="imguser+'/minis/order/right.png'" mode="" v-if="process.isFail==1"></image>
				</view>
				<view class="fenge disp ">
					<view class="fengeLine" v-if="index+1!=list.length">
						<view class="line"></view>
					</view>
					<view class="" v-if="process.flowN - 1>=index + 1">
						<view class="statusNow disp aic">
							<image :src="imguser+'/minis/order/right.png'" mode=""></image>
							<text class="fz12 fw mgrt">通过</text>
							<text class="colorb fz12" v-if="index==5" @click="toSee">查看资料</text>
						</view>
					</view>
					<view class="" v-if="process.flowN==index + 1&&process.isFail==1">
						<view class="statusNow disp aic">
							<image  :src="imguser+'/minis/order/right.png'"  mode=""></image>
							<text class="fz12 fw mgrt">通过</text>
							<text class="colorb fz12" v-if="index==0" @click="toSee">查看资料</text>
						</view>
					</view>
					<view class="noPass" v-if="process.flowN==index + 1&&process.isFail==2">
						<view class="mess">
							<view class="color disp">
								<image class="warnner" :src="imguser+'/minis/order/warnner.png'"  mode=""></image>
								<text>未通过</text>
							</view>
							<view class="">{{process.causeOfFailure}}</view>
						</view>
					</view>
					<view class="examine" v-if="parseInt(process?process.flowN:'0') - 1==index&&show">
						<u--textarea 
							v-model="causeOfFailure" 
							placeholder="请输入未通过理由" 
						></u--textarea>
						<view class="saveDefat tac fz12" @click="save(2,index)">保存</view>
					</view>
					<view class="examine disp aic" v-if="parseInt(process?process.flowN:'0') - 1==index&&!show&&process.isFail==0">
						<view class="btn tac fz12" @click="save(1,index)">通过</view>
						<view class="btn2 tac fz12" @click="show=true">未通过</view>
					</view>
				</view>
			</view>
		</view>
		<view class="inpMoney disa aic fz12" v-if="process.applyState!=3 && process.flowN==13 && process.isFail==1 && userType==3">
			<view class="">实际放款金额：</view>
			<u-input
			    placeholder="请输入金额"
          type="digit"
			    border="surround"
			    v-model="money"
			></u-input>
			<text>元</text>
		</view>
		<view class="endBtn tac colorf"  v-if="process.applyState!=3 && process.flowN==13&&process.isFail==1 && userType==3" @click="finish">结单</view>
	</view>
</template>

<script>
	import {getFlowPath,saveFlowPath,finishFlowPath} from  "../../api/search.js"
  import config from '@/common/config'
export default {
	data() {
		return {
			show:false,
			id:null,
			money:'',
      userType:uni.getStorageSync('userInfo').userType,
			process:{},
      imguser:config.baseImgUrl,
			causeOfFailure:'',
      list:['完善资料','资产流动性测算','提交咨询','业务员处理','权证处理','资料审核','银行面签填贷款申请表','考察抵押物和经营场地','银行出批复','银行面签抵押合同和借款合同','办理抵押','办公证','成功']
		}
	},
	onLoad(option) {
		this.id = option.id
		this.getProcess()
	},
	methods: {
		//获取流程
		getProcess(){
			getFlowPath({orderId:this.id}).then(res => {
				this.process = res.data[0]
			})
		},
		//保存流程
		save(i,s){
			this.show = false
			let parmas = {
				orderApplicationId:this.id,
				userId:uni.getStorageSync('userInfo').id,
				flowN:s+1,
				causeOfFailure:this.causeOfFailure,
				isFail:i
			}
			saveFlowPath(parmas).then(res => {
				if(res.code==0){
					uni.$u.toast('操作成功')
					setTimeout(()=>{
						this.getProcess()
					},1000)
				}else{
					uni.$u.toast(res.msg)
				}
			})
		},
		toSee(){
			uni.navigateTo({
				url:`/pages/search/checkInformation?id=${this.id}&cant=1`
			})
		},
		//结单
		finish(){
			finishFlowPath({
				orderId: this.id,
				realAmount: this.money
			}).then(res => {
				if(res.code==0){
          uni.$u.toast('结单成功')
          setTimeout(()=>{
            uni.navigateBack()
          },1000)
				}else{
					uni.$u.toast(res.msg)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container{
	padding: 20rpx;
	min-height: 100vh;
	background-color: #f7f7f7;
	.title{
		padding: 20rpx 0;
	}
	.list{
		.listBar{
			.tac{
        width: 50rpx;
        height: 50rpx;
        line-height: 50rpx;
				border-radius: 50%;
				background-color: #ccc;
			}
			.bg{
				background-color: #3F51B5;
			}
			.right{
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
			}
			.fenge{
				padding: 10rpx 0;
				.fengeLine{
					width: 40rpx;
					min-height: 40rpx;
					.line{
						width: 1rpx;
						height: 100%;;
						margin: auto;
						background-color: #000;
					}
				}
				.statusNow{
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
				.examine{
					width: 90%;
					padding: 20rpx;
					background-color: #fff;
					.btn{
						width: 150rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						margin-right: 20rpx;
            color: #ffffff;
						background-color: #4CAF50;
					}
          .btn2{
            width: 150rpx;
            line-height: 50rpx;
            border-radius: 25rpx;
            margin-right: 20rpx;
            color: #ffffff;
            background-color: #FF5722;
          }
					.saveDefat{
						width: 150rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						margin-top: 10rpx;
						background-color: #dafbe1;
					}
				}
			}
		}
	}
	.noPass{
		width: 80%;
	}
	.mess{
		width: 100%;
		padding: 20rpx;
		height: 100rpx;
		background-color: #ccc;
    border-radius: 4px;
		.warnner{
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;
			border-radius: 50%;
		}
	}
	.inpMoney{
		//width: 80%;
		padding: 20rpx;
		margin: 40rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.endBtn{
		width: 80%;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #116329;
		margin: auto;
	}
	
}
</style>
